<script setup>
import axios from 'axios';
import { onMounted, ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';

const viewData = ref([]);

const stateOptions = [
    {
        value: '0',
        label: '离职',
    },
    {
        value: '1',
        label: '出差',
    },
    {
        value: '2',
        label: '休假',
    },
    {
        value: '3',
        label: '在职',
    }
]
const departmentOptions = ref([]);
const postOptions = ref([]);
const salaryOptions = ref([]);

const para = ref({
    num: null,
    time: [],
    beginTime: null,
    endTime: null
});

const obj = ref({
    num: null,
    name: null,
    sex: null,
    departmentId: null,
    departmentName: null,
    postId: null,
    postName: null,
    phone: null,
    salaryId: null,
    money: null,
    entryTime: null,
    idCard: null,
    education: null,
    certification: null,
    address: null,
    state: null,
    password: null
});

const isUpdate = ref(false);
const showDialog = ref(false);
const showDetails = ref(false);
const pageInfo = reactive({
    pageNum: 1,
    pageSize: 5,
    total: 0
});

const handledetails = (row) => {
    showDetails.value = true;
    obj.value = row;
};

const handleUpdate = (row) => {
    obj.value.num = row.num;
    obj.value.name = row.name;
    obj.value.sex = row.sex;
    // obj.value.departmentId = row.departmentId;
    obj.value.departmentId = row.departmentId.toString();
    // obj.value.postId = row.postId;
    obj.value.postId = row.postId.toString();
    obj.value.phone = row.phone;
    obj.value.salaryId = row.salaryId.toString();
    obj.value.entryTime = row.entryTime;
    obj.value.idCard = row.idCard;
    obj.value.education = row.education;
    obj.value.certification = row.certification;
    obj.value.address = row.address;
    // obj.value.state = row.state;
    obj.value.state = row.state.toString();
    obj.value.password = row.password;
    obj.value.id = row.id;

    isUpdate.value = true;
    showDialog.value = true;

};

const getDepartmentSelect = () => {
    axios({
        method: "GET",
        url: `/api/department/select`
    }).then((resp) => {
        if (resp.data.code === 200) {
            departmentOptions.value = resp.data.data;
        } else {
            ElMessage.error(resp.data.msg);
            console.log("出现逻辑异常:", resp);
        }
    }).catch((e) => {
        console.log("出现异常:", e);
    });

}

const getPostSelect = () => {
    axios({
        method: "GET",
        url: `/api/post/select`
    }).then((resp) => {
        if (resp.data.code === 200) {
            postOptions.value = resp.data.data;
        } else {
            ElMessage.error(resp.data.msg);
            console.log("出现逻辑异常:", resp);
        }
    }).catch((e) => {
        console.log("出现异常:", e);
    })

}

const getSalarySelect = () => {
    axios({
        method: "GET",
        url: `/api/salaryLevel/select`
    }).then((resp) => {
        if (resp.data.code === 200) {
            salaryOptions.value = resp.data.data;
        } else {
            ElMessage.error(resp.data.msg);
            console.log("出现逻辑异常:", resp);
        }
    }).catch((e) => {
        console.log("出现异常:", e);
    })

}


// const handleDelete = (row) => {
//     axios({
//         url: "/api/employee/delete/" + row.id,
//         method: "delete"
//     }).then((resp) => {
//         if (resp.data.code === 200) {
//             ElMessage.info(`删除${row.postName}成功`);
//             getList();
//         } else {
//             console.log("出现逻辑异常:", resp);
//         }
//     }).catch((e) => {
//         console.log("出现异常:", e);
//     });
// };

let getList = () => {

    axios({
        method: "POST",
        url: `/api/employee/list`,
        data: {
            beginTime: (para.value.time && para.value.time.length > 0) ? para.value.time[0] : null,
            endTime: (para.value.time && para.value.time.length > 1) ? para.value.time[1] : null,
            num: para.value.num,
            ...pageInfo
        }
    }).then((resp) => {
        if (resp.data.code === 200) {
            viewData.value = resp.data.data.list;
            viewData.value.forEach(e => {
                switch (e.state) {
                    case 0:
                        e.state = '已离职';
                        break;
                    case 1:
                        e.state = '出差';
                        break;
                    case 2:
                        e.state = '休假';
                        break;
                    default:
                        e.state = '在职';
                }
            });
            pageInfo.total = resp.data.data.count ? resp.data.data.count : 0;
        } else {
            ElMessage.error(resp.data.msg);
            console.log("出现逻辑异常:", resp);
        }
    }).catch((e) => {
        console.log("出现异常:", e);
    })
};

const selectobj = () => {
    getList();
};

const addobj = () => {
    obj.value.num = null;
    obj.value.name = null;
    obj.value.sex = null;
    obj.value.departmentId = null;
    obj.value.postId = null;
    obj.value.phone = null;
    obj.value.salaryId = null;
    obj.value.entryTime = null;
    obj.value.idCard = null;
    obj.value.education = null;
    obj.value.certification = null;
    obj.value.address = null;
    obj.value.state = null;
    obj.value.password = null;

    isUpdate.value = false;
    showDialog.value = true;
};

const submitData = () => {
    obj.value.postId = parseInt(obj.value.postId);
    obj.value.departmentId = parseInt(obj.value.departmentId);
    obj.value.salaryId = parseInt(obj.value.salaryId);
    obj.value.state = parseInt(obj.value.state);

    const axiosPara = {
        data: obj.value
    };

    if (isUpdate.value) {
        axiosPara.method = "PATCH";
        axiosPara.url = "/api/employee/update";
    } else {
        axiosPara.method = "POST";
        axiosPara.url = "/api/employee/add";
    }

    axios(axiosPara).then((resp) => {
        if (resp.data.code === 200) {
            showDialog.value = false;
            getList();
        } else {
            ElMessage.error(resp.data.msg);
            console.log("出现逻辑异常:", resp);
        }
    }).catch((e) => {
        console.log("出现异常:", e);
    });

};

onMounted(() => {
    getList();
    getDepartmentSelect();
    getPostSelect();
    getSalarySelect();
});
</script>

<template>
    <header class="header">
        <div class="wrapper">
            <div>
                <span>员工编号:</span>
                <el-input v-model="para.num" size="small"></el-input>
            </div>
            <div class="s-block">
                <span class="s-demonstration">入职时间</span>
                <el-date-picker v-model="para.time" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange"
                    placeholder="Select date and time" size="small" />
            </div>
        </div>
        <div class="w-button">
            <el-button @click="selectobj">查询</el-button>
            <el-button @click="addobj">新增</el-button>
        </div>
    </header>
    <main>
        <el-table :data="viewData">
            <el-table-column prop="num" label="员工编号"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="sex" label="性别"></el-table-column>
            <el-table-column prop="departmentName" label="部门"></el-table-column>
            <el-table-column prop="postName" label="职务"></el-table-column>
            <el-table-column prop="money" label="基础工资"></el-table-column>
            <el-table-column prop="phone" label="手机号"></el-table-column>
            <el-table-column prop="state" label="状态"></el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handledetails(scope.row)">详情</el-button>
                    <el-button size="small" @click="handleUpdate(scope.row)">修改</el-button>
                    <!-- <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button> -->
                </template>
            </el-table-column>
        </el-table>
    </main>
    <footer>
        <el-pagination v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
            :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total"
            @size-change="getList" @current-change="getList" />

    </footer>
    <el-dialog v-model="showDetails">
        <div>
            <span>员工编号:</span>
            <el-input v-model="obj.num" readonly></el-input>
        </div>
        <div disabled>
            <span>姓名:</span>
            <el-input v-model="obj.name" readonly></el-input>
        </div>
        <div>
            <span>性别:</span>
            <el-input v-model="obj.sex" readonly></el-input>
        </div>
        <div>
            <span>部门:</span>
            <el-input v-model="obj.departmentName" readonly></el-input>
        </div>
        <div>
            <span>职务:</span>
            <el-input v-model="obj.postName" readonly></el-input>
        </div>
        <div>
            <span>手机号:</span>
            <el-input v-model="obj.phone" readonly></el-input>
        </div>
        <div>
            <span>基础工资:</span>
            <el-input v-model="obj.money" readonly></el-input>
        </div>
        <div>
            <span>入职时间:</span>
            <el-input v-model="obj.entryTime" readonly></el-input>
        </div>
        <div>
            <span>身份证号:</span>
            <el-input v-model="obj.idCard" readonly></el-input>
        </div>
        <div>
            <span>学历:</span>
            <el-input v-model="obj.education" readonly></el-input>
        </div>
        <div>
            <span>证书:</span>
            <el-input v-model="obj.certification" readonly></el-input>
        </div>
        <div>
            <span>住址:</span>
            <el-input v-model="obj.address" readonly></el-input>
        </div>
        <div>
            <span>状态:</span>
            <el-input v-model="obj.state" readonly></el-input>
        </div>
        <div>
            <span>密码:</span>
            <el-input v-model="obj.password" type="password" readonly></el-input>
        </div>
    </el-dialog>

    <el-dialog v-model="showDialog" class="dialogDiv">
            <div>
                <span>员工编号:</span>
                <el-input v-model="obj.num"></el-input>
            </div>
            <div>
                <span>姓名:</span>
                <el-input v-model="obj.name"></el-input>
            </div>
            <div>
                <span>性别:</span>
                <el-input v-model="obj.sex"></el-input>
            </div>
            <div>
                <span>部门:</span>
                <el-select v-model="obj.departmentId" class="m-2" placeholder="Select">
                    <el-option v-for="item in departmentOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </div>
            <div>
                <span>职务:</span>
                <el-select v-model="obj.postId" class="m-2" placeholder="Select">
                    <el-option v-for="item in postOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <div>
                <span>手机号:</span>
                <el-input v-model="obj.phone"></el-input>
            </div>
            <div>
                <span>基础工资:</span>
                <el-select v-model="obj.salaryId" class="m-2" placeholder="Select">
                    <el-option v-for="item in salaryOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <div class="block">
                <span class="demonstration">入职时间:</span>
                <el-date-picker v-model="obj.entryTime" value-format="YYYY-MM-DD HH:mm:ss" type="datetime"
                    placeholder="Pick a Date" />
            </div>
            <div>
                <span>身份证号:</span>
                <el-input v-model="obj.idCard"></el-input>
            </div>
            <div>
                <span>学历:</span>
                <el-input v-model="obj.education"></el-input>
            </div>
            <div>
                <span>证书:</span>
                <el-input v-model="obj.certification"></el-input>
            </div>
            <div>
                <span>住址:</span>
                <el-input v-model="obj.address"></el-input>
            </div>
            <div>
                <span>状态:</span>
                <el-select v-model="obj.state" class="m-2" placeholder="Select">
                    <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <div>
                <span>密码:</span>
                <el-input v-model="obj.password" type="password"></el-input>
            </div>
            <el-button @click="submitData">提交</el-button>
    </el-dialog>
</template>

<style scoped>
.header {
    display: flex;
    flex-direction: column;
}

.wrapper {
    display: flex;
    flex-direction: row;
}

.wrapper>div {
    display: flex;
    flex-direction: row;
    margin-right: 1vw;
    gap: 0.5vw;
}

.wrapper>div>span {
    flex: 0 0 auto;
    /* flex-basis: auto; */
    /* flex-shrink: 0; */
}

.w-button {
    display: flex;
    flex-direction: row;
}

.w-button>button {
    margin-right: 1vw;
}

.dialogDiv>div{
    display: flex;
    flex-direction: row;
}
</style>